<script>
  import School from "./components/School.vue";
  import Student from "./components/Student.vue";
  export default {
    name: "App",
    data() {
      return {
      }
    },
    components: {
      School,
      Student,
    },
    methods: {
      showName(name) {
        console.log("App 父组件被调用了!", name)
      },
      showStudentName(name) {
        console.log("App 父组件被调用了 使用了新方式1", name)
      },
      demo1() {
        console.log("demo1")
      }
    },
    mounted() {
      this.$refs.student.$on("showStudentName", this.showStudentName);
      this.$refs.student.$on("demo1", this.demo1);
    }
  }
</script>

<template>
  <div id="root">
      <School :showName="showName"/>

    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on） -->
<!--      <Student v-on:showStudentName="showStudentName"/>-->

    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref） -->
      <Student ref="student"/>
  </div>
</template>

<style>
 #root {
   background-color: #2c3e50;
   padding: 20px;
 }
</style>